<template>
  <view>
    <view class="scrollViewContainer">
      <!-- 左边滚动区域 -->
      <scroll-view scroll-y="true" :style="{height:wh+'px'}" class="leftScrollView">
        <view v-for="(item,index) in cateTitle" :key="index" @click="changeActive(index)">
          <view class="leftScrollItem" :class="{active:index===active}">{{item}}</view>
        </view>
      </scroll-view>
      <!-- 右边滚动区域 -->
      <scroll-view scroll-y="true" :style="{height:wh+'px'}" class="rightScrollView" :scroll-top="scrollTop">
        <subFloor class="cateLevel2" v-for="(item,index) in cateLevel2" :key="index" :data="item">
        
        </subFloor>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import subFloor from "./@/pages/cate/components/subFloor.vue"
 import badgeMix  from '@/mixins/tabbar-badge.js'
  export default {
    mixins:[badgeMix],
    components:{subFloor},
    data() {
      return {
        wh: 0, // 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabBar 高度
        active: 0,
        cateTitle: [], // 左边标题
        cateLevel2: [] ,//右边二级数据
        scrollTop: 0    // // 滚动条距离顶部的距离
      }
    },
    onLoad() {
      //获取当前设备的信息
      const res = uni.getSystemInfoSync()
      this.wh = res.windowHeight

      //调用获取分类数据的方法
      this.getCateList()
    },

    methods: {
      //获取分类数据的方法
      async getCateList() {
        const {
          message
        } = await this.$u.get("/categories")
        console.log(message)
        this.cateList = message
        this.cateTitle = this.cateList.map(item => item.cat_name)
        this.cateLevel2 = this.cateList[this.active].children
      },
      //切换激活项
      changeActive(index) {
        this.active = index
        this.cateLevel2=this.cateList[this.active].children
        this.scrollTop=this.scrollTop===0?1:0
      }
    }
  }
</script>

<style lang="scss" scoped>
  .scrollViewContainer {
    display: flex;

    .leftScrollView {
      width: 182rpx;

      .leftScrollItem {
        font-size: 28rpx;
        line-height: 74rpx;
        text-align: center;
        background-color: #F3F3F3;
        color: #585858;

        //激活项的样式
        &.active {
          color: #EA4350;
          font-weight: bold;
          position: relative;

          //渲染激活项左侧的红色指示边线
          &::before {
            content: '';
            display: block;
            width: 4rpx;
            height: 43rpx;
            background-color: #EA4350;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
  .cateLevel2{
  margin-bottom: 40rpx ;
  }
  
  
</style>
